<!-- 选择销售门店弹出窗 -->
<template>
	<div>
        <el-dialog title="选择销售门店" v-model="state.isShowDialog" :before-close="onCancel" width="580">
			<div class="cropper-warp">
				<el-table :data="userInfos.storeList" style="width: 100%;">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="storeId" label="门店ID" />
                    <el-table-column prop="name" label="门店类型" />
                    <el-table-column prop="type" label="门店名称" />
                </el-table>
			</div>
        </el-dialog>
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { ElMessage } from 'element-plus';
import { Session } from '/@/utils/storage';
import { useUserInfo } from '/@/stores/userInfo';
import { nodeList } from '/@/api/common';
import { NextLoading } from '/@/utils/loading';
const router = useRouter();
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
// 定义变量内容
const state = reactive({
    loading:false,
	isShowDialog: false,
	cropperImgBase64: '',
    param: {
		keyword: "",
		pageNum: 1,
		pageSize: 10,  
	},
    total: 0,
    goodsTableData:[],
});

// 打开弹窗
const openDialog = () => {
	state.isShowDialog = true;
	console.log(userInfos)
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 更换
const changeFun = async(row : {storeId:any}) => {
	const { results } = await nodeList(row.storeId);
	// // 存储 token 到浏览器缓存
	Session.set('token', 'Bearer ' + results.token);
    // 登录成功提示
    ElMessage.success(`切换成功`);
	router.push('/');
    state.isShowDialog = false;
    // 添加 loading，防止第一次进入界面时出现短暂空白
    NextLoading.start();
};

// 时间判断
const isExpired =(value : any) => {
    if(value > 0){
        return '正常'
    }else{
        return '已过期'
    }
};


// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.cropper-warp {
	.cropper-warp-left {
		position: relative;
		display: inline-block;
		height: 350px;
		flex: 1;
		border: 1px solid var(--el-border-color);
		background: var(--el-color-white);
		overflow: hidden;
		background-repeat: no-repeat;
		cursor: move;
		border-radius: var(--el-border-radius-base);
		.cropper-warp-left-img {
			width: 100%;
			height: 100%;
		}
	}
	.cropper-warp-right {
		width: 150px;
		height: 350px;
		.cropper-warp-right-title {
			text-align: center;
			height: 20px;
			line-height: 20px;
		}
		.cropper-warp-right-item {
			margin: 15px 0;
			.cropper-warp-right-value {
				display: flex;
				.cropper-warp-right-value-img {
					width: 100px;
					height: 100px;
					border-radius: var(--el-border-radius-circle);
					margin: auto;
				}
				.cropper-size {
					width: 50px;
					height: 50px;
				}
			}
			.cropper-warp-right-label {
				text-align: center;
				font-size: 12px;
				color: var(--el-text-color-primary);
				height: 30px;
				line-height: 30px;
			}
		}
	}
}
</style>
